<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- 1.计算属性 -->
  <p>总积分:{{totalScore}}</p>
</div>


<script src="../js/vue.js"></script>
<script>
  // 1.创建Vue的实例对象
  const app = Vue.createApp({
    data(){
      return {
        members:[
          {id: '0',name:'张零',score: 1000},
          {id: '1',name:'张一',score: 1001},
          {id: '2',name:'张二',score: 1002},
          {id: '3',name:'张三',score: 1003}
        ]
      }
    },
    computed:{
      // 计算属性
      totalScore(){
        let total = 0;
        // let of 遍历
        for(let member of this.members){
          total += member.score;
        }
        return total;
      }
    },
  }).mount('#app');
</script>
</body>
</html>